<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="功能中心" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @click="changeGrid">
        <uni-grid-item v-for="(item, index) in gridList" :key="item.key">
          <view  @click="handleGridClick" :data-key="item.key"  class="grid-item-box">
            <img :src="item.icon" mode="aspectFill" class="icon-img" />
            <text class="text">{{ item.text }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <view class="text-container">
      “锦绣毛南”是赋能毛南族女性、以数字手段让传统手工艺成为增收新途径的专属平台。
    </view>

    <!-- 图片容器：控制图片占满宽度 -->
    <view class="image-container">
      <image src="http://119.29.117.29:9000/nalang/images/detail.png" class="full-width-img"></image>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [{
            image: 'http://119.29.117.29:9000/nalang/images/banner/banner1.png'
          },
          {
            image: 'http://119.29.117.29:9000/nalang/images/banner/banner2.png'
          },
          {
            image: 'http://119.29.117.29:9000/nalang/images/banner/banner3.jpg'
          },
          {
            image: 'http://119.29.117.29:9000/nalang/images/banner/banner4.jpg'
          },
          {
            image: 'http://119.29.117.29:9000/nalang/images/banner/banner5.jpg'
          }
        ],
        gridList: [
          {
            icon: "http://119.29.117.29:9000/nalang/images/tabbar/AI.png",
            text: "设计助手",
            key: "design-assistant"  // 唯一标识，用于区分功能
          },
          {
            icon: "http://119.29.117.29:9000/nalang/images/shougong.png",
            text: "手工教学",
            key: "handcraft-teach"
          },
            {
            icon: "http://119.29.117.29:9000/nalang/images/shop.png",
            text: "电商攻略",
            key: "shop-guide"
          },
          {
            icon: "http://119.29.117.29:9000/nalang/images/dataAnaly.png",
            text: "数据分析",
            key: "data-analy"
          }

        ]
      }
    },
    methods: {
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeGrid(index) {


      },
      handleGridClick(e){
        // 通过事件对象获取 data-key 的值
        const key = e.currentTarget.dataset.key;
        console.log("点击的项标识：", key);

        // // 根据 key 执行不同逻辑
        if (key === "design-assistant") {
          uni.navigateTo({ url: "/pages/ai/ai" });
        }else {
          this.$modal.showToast('模块建设中~')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
  .icon-img {
    width: 30px;   /* 与图标 size 一致 */
    height: 30px;  /* 与图标 size 一致 */
    margin-bottom: 8px; /* 与文字保持间距，和图标统一 */
    object-fit: contain; /* 保持图片比例，避免拉伸变形（替代 mode="aspectFill" 更灵活） */
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }

  /* 文字容器：水平居中 + 适当内边距避免贴边 */
  .text-container {
    text-align: center; /* 核心：文字水平居中 */
    padding: 16px 20px; /* 上下16px、左右20px内边距，可根据需求调整 */
    font-size: 15px; /* 可选：调整文字大小 */
    line-height: 1.6; /* 可选：优化文字行高，提升阅读体验 */
  }

  /* 图片容器：清除默认间距，可选添加上下间距 */
  .image-container {
    padding: 0 20px 16px; /* 左右20px内边距（与文字对齐），底部16px间距 */
  }

  /* 图片：占满容器宽度 + 保持比例不拉伸 */
  .full-width-img {
    width: 100%; /* 核心：图片宽度占满父容器 */
    //height: auto; /* 关键：高度自适应，避免图片变形 */
    border-radius: 8px; /* 可选：添加圆角，优化视觉效果 */
  }
</style>
